<template>
    <div>
        <el-form :model="form" label-width="120px" style="max-width:500px;">
            <el-form-item label="商品分类">
                <el-input v-model="form.goodsCategoryId" />
            </el-form-item>
            <el-form-item label="商品名称">
                <el-input v-model="form.goodsName" />
            </el-form-item>
            <el-form-item label="商品简介">
                <textarea v-model="form.goodsIntro" cols="50" rows="4"></textarea>
            </el-form-item>
            <el-form-item label="商品价格">
                <el-input-number v-model="form.originalPrice" :min="1" :max="99" />
            </el-form-item>
            <el-form-item label="商品售卖价">
                <el-input-number v-model="form.sellingPrice" :min="1" :max="99" />
            </el-form-item>
            <el-form-item label="商品库存">
                <el-input-number v-model="form.stockNum" :min="1" :max="999" />
            </el-form-item>
            <el-form-item label="商品标签">
                <el-input v-model="form.tag" />
            </el-form-item>
            <el-form-item label="上架状态">

                <el-radio-group v-model="form.goodsSellStatus" class="ml-4">
                    <el-radio label="0" size="large">上架</el-radio>
                    <el-radio label="1" size="large">下架</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="图片上传">
                <el-upload class="avatar-uploader" action="http://backend-api-02.newbee.ltd/manage-api/v1/upload/file" :headers="token" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :on-progress="aaa">
                    <img v-if="form.goodsCoverImg" :src="form.goodsCoverImg" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
                <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar" /> -->
            </el-form-item>
            <el-form-item label="商品详情">
                <el-input v-model="form.goodsDetailContent" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="add">确定</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { ref, reactive } from "vue";
import { Plus } from '@element-plus/icons-vue'
import {addgoods} from '../../api/user.js'
 

export default {
  setup() {
    const form = reactive({
      goodsCategoryId: 2128,
      goodsName: "",
      goodsIntro: "",
      originalPrice: 1,
      sellingPrice: 1,
      stockNum: 1,
      goodsDetailContent: "",
      goodsSellStatus: "",
      goodsCoverImg: "",
      tag:''
    });

    const token=reactive({
        token:''
    });
    token.token=localStorage.getItem('token')
    console.log(token.token);
    const handleAvatarSuccess = (file) => {
       console.log(file.data);
       form.goodsCoverImg=file.data;
       console.log(form.goodsCoverImg);
    };
    const add=()=>{
        addgoods(form).then(res=>{
            console.log(res);
        })
    }
    return { form,handleAvatarSuccess,token,add };
  }
};
</script>


<style lang="scss" scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>